<template>
  <el-dialog :title="typeTitle"
             :visible.sync="dialogForm">
    <el-form>
      <el-form-item label="书名"
                    :label-width="formLabelWidth">
        <el-input v-model="book.name"
                  class="ip"
                  autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="作者"
                    :label-width="formLabelWidth">
        <el-input v-model="book.author"
                  class="ip"
                  autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="价格"
                    :label-width="formLabelWidth">
        <el-input v-model="book.price"
                  class="ip"
                  autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <el-button @click="dialogForm = false">取 消</el-button>
      <el-button type="primary"
                 @click="submit()">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      book: {},
      formLabelWidth: '120px',
      dialogForm: false,
      typeTitle: '添加书籍',
      type: '',
      updateId: 0
    }
  },
  methods: {
    open (value, id) {
      this.type = value
      if (value == 'add') {
        //在打开窗口之前我就把book的数据清空
        this.book = {};
        this.typeTitle = '添加书籍'
      } else if (value == 'update') {
        this.typeTitle = '修改书籍'
        this.updateId = id
        //如果把这个id给直接给book对象，因为添加不需要id，id是自增的。
        //等id获取出来再调用回显
        this.getById();
      }
      this.dialogForm = true
    },
    submit () {
      if (this.type == 'add') {
        this.submitAdd()
      } else if (this.type == 'update') {
        this.submitUpdate()
      }
    },
    submitAdd () {
      this.axios.post('/book/add', this.book).then(res => {
        // if (res.data.affectedRows == 1) {
        //   this.dialogForm = false
        //   this.$message({
        //     message: '添加成功',
        //     type: 'success'
        //   });
        //   this.$emit('refresh');
        // }
        if (res.data.code == '2000') {
          this.dialogForm = false
          this.$message({
            message: res.data.msg,
            type: 'success',
            duration: 2000
          });
          this.$emit('refresh');
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 2000
          });
        }
      })
    },
    getById () {
      this.axios.post('/book/getById', { id: this.updateId }).then(res => {
        this.book = res.data[0];
      })
    },
    submitUpdate () {
      this.axios.post('/book/update', this.book).then(res => {
        if (res.data.affectedRows == 1) {
          this.dialogForm = false
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.$emit('refresh');
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.ip {
  width: 65%;
}
</style>